<template>
  <div class="shoplist">
	<ul>
		<li v-for="item in shoplist" :key="item.id">
			<img :src="item.src" />
			<div>
				<p>{{item.title}}</p>
				<p class="price">￥{{item.price}}</p>
				<p><button @click="add(item)">加入购物车</button></p>
			</div>
		</li>
	</ul>
  </div>
</template>

<script>
	import { mapState } from 'vuex'
	export default{
		name:'ShopList',
		// computed:{//shoplist的数据放在store里面集中管理，可以在组件里直接通过computed使用
		// 	shoplist(){
		// 		return this.$store.state.shoplist
		// 	}
		// }
		//每个计算属性都要写个方法太麻烦了，vuex提供了一个辅助函数mapState简化代码
		computed:mapState(['shoplist']),
		methods:{
			add(item){
				this.$store.commit('add',item);
			}
		}
	}

</script>
<style scoped>
	li{
		border-bottom:1px dashed #ccc ;
		position: relative;
	}
	li div{
		display: inline-block;
		position: absolute;
		top: 20px;
		line-height: 30px;
	}
	li img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 10px 5px 10px;
	}
	.price{
		color: #f00;
	}
	button{
		background-color: coral;
		border: none;
		color: white;
		padding:5px;
	}
	.shopcart{
		padding-bottom: 50px;
	}
</style>
